<template>
  <!-- 首页的推荐页面 -->
  <div class="recommend">
    <Loading v-if="!lists"/>
    <!-- <div v-else> -->
      <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
        <!-- 下拉提示 -->
        <template #pulling>
          <img class="pull" src="../assets/images/pullFresh.png" />
        </template>
        <!-- 释放提示 -->
        <template #loosing>
          <img class="pull" src="../assets/images/pullFresh.png" />
        </template>

        <!-- 加载提示 -->
        <template #loading>
          <img class="pull" src="../assets/images/loading.gif" />
        </template>

        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>

      
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <template #loading>
            <img class="pull" src="../assets/images/loading.gif" />
        </template>
          <ul class="note">
            <Lists v-for="(list,index) in lists" :key="index" :list="list.r"/>
          </ul>

        </van-list>
      </van-pull-refresh>
    <!-- </div> -->
  </div>
</template>

<script>
import { getRecommendList } from "@/apis/index";
import Lists from  "@/components/Lists.vue"
import Loading from  "@/components/Loading.vue"

export default {
  name: "HomeRecommend",
  components: {
    Lists,
    Loading,
  },
    data() {
        return {
            images: [],
            banner: null,
            lists: null,
            loading: false,
            finished: false,
            refreshing: false,
            i: 10,
        };
  },
//   banner轮播图和推荐列表数据获取
  created: async function () {
    this.banner = (await getRecommendList(10)).data.result.banner;
    this.images = await this.banner.map( item => `${item.i}`);
    this.lists = (await getRecommendList(10)).data.result.list;
  },
  methods: {
//下拉加载数据
   onLoad: function(){
      // 异步更新数据
      // console.log("加载中");
      if (this.refreshing) {
          this.lists = [];
          this.refreshing = false;
          this.i = this.i+=10;
        }
        this.i += 10;
        getRecommendList(this.i).then( res => {
          this.lists = [...this.lists, ...res.data.result.list];
          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.i == 100) {
            this.finished = true;
          }
        })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // this.lists = null;
      // this.i = 1;
      // console.log("刷新了");
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      setTimeout(() => {
        this.onLoad();
      },1000);
    },
  },
};
</script>

<style lang="less" scoped>
.pull{
  margin: 0 auto;
  width: 100px;
}
.van-swipe__indicator{
    width: 20px !important;
    height: 4px !important;
    background-color: #6d6d70 !important;
    border-radius: 0 !important;
    opacity: .4 !important;
}
.van-swipe__indicator--active {
    background-color: #f7f5f5 !important;
}
.recommend{
overflow: hidden;
    .note{
        li{
            // margin: 10px 0;
            &:first-child{
                margin-top: 0px;
            }
        }
    }
}
</style>